<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '优秀学员'" ref="navbar"></fa-navbar>
		<view class="content">
			<view class="search">
				<u-search height="68" searchIconSize="44" :clearabled="true" bgColor="#ffffff" margin="34rpx 0"
					shape="round" placeholder="请输入关键词查找" :showAction="false" v-model="keyword" @search="searchKeyword"
					@clear="searchKeyword"></u-search>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in traineeList" :key="index"  @click="traineeDetail(item)">
					<view class="left">
						<u-image width="150" radius="10" :src="item.image" height="150"></u-image>
					</view>
					<view class="right">
						<view class="title">{{item.name}}</view>
						<view class="desc">{{item.intro||""}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="traineeList.length">
			<u-loadmore bg-color="#f4f6f8" fontSize="28" :line="true" :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!traineeList.length">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
			:custom-style="{ backgroundColor: lightColor }"></u-back-top>
	</view>
</template>

<script>
	import {
		archives
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		data() {
			return {
				traineeList: [],
				page: 1,
				has_more: false,
				keyword: ''
			};
		},
		onLoad() {
			this.getTraineeList()
		},
		methods: {
			getTraineeList() {
				this.$api.getTraineeList({
					params: {
						page: this.page,
						keyword: this.keyword
					}
				}).then((res) => {
					if (res.code) {
						if (this.page === 1) {
							this.traineeList = [];
						}
						let traineeList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.traineeList = [...this.traineeList, ...traineeList];
					}
				})
			},
			traineeDetail(item){
				if(item.type === 'outside'){
					uni.$u.vuex('vuex_webs', {
						title: item.name,
						url: item.linkurl
					});
					uni.$u.route({
						url: '/pages/webview/webview',
						
					})
					return
				}
				uni.$u.route({
					url: '/pages/trainee/detail',
					params: {
						article_id: item.id
					},
				})
				return
			},
			searchKeyword(){
				this.page = 1;
				this.getTraineeList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 188rpx 24rpx 280rpx;
	}

	.list {
		.item {
			display: flex;
			// align-items: center;
			padding: 24rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-bottom: 24rpx;

			.left {
				margin-right: 24rpx;
			}

			.right {
				.title {
					font-size: 30rpx;
					color: #333333;
					font-weight: 600;
					margin-bottom: 18rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的文本 */
					text-overflow: ellipsis;
					width: 430rpx;

				}

				.desc {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>